<template>
  <div class="returnFee">
   <div class="banner" :style="{'height':bannerHeight+'px'}">
    <div class="header">
      <div class="name text-center">我的工资总额</div>
      <div class="name text-center"><span class="total">{{sum}}</span>元</div>
    </div>
  </div>
  <div class="detailed" style="z-index: 0;">
    <div v-if="!hasData"  class="noContent">
      <p>您还没有工资,快去找工作吧~</p>
      <button class="button" @click="goToFindJob()">去找工作</button>
    </div>
    <div v-else class="detailed-content">
      <p class="text-md" style="padding: 5px 0 10px 0;">工资明细</p>
      <div class="list" v-for='(item, index) in wagesList' :key='index' style="display: flex;align-items: center;" @click='gotoDetail(item)'>
        <div class="text-md text-normal" style="flex: 5">
          {{item.workerCompany}}
        </div>
        <div class="fr" style="flex: 4;align-items: center;text-align: right;">
          <div class="moeny">+<span class="text-md">{{item.workRealWage}}</span>元</div>
          <div class="text-sm text-gray">{{item.createdAt | filterDate}}</div>
        </div>
        <div style="flex: 1;text-align: right;align-items: center;cursor: pointer;">
          <img style="width: 18px;" src="/static/wechat/images/arrow@2x.png">
        </div>
      </div>
    </div>
  </div>
  <bottomMenu :menuType="menuType"></bottomMenu>
</div>
</template>

<script>
  import bottomMenu from './bottomMenu.vue'
  import {getSalarys} from '@/controller'
  export default {
    name: 'wages',
    data () {
      return {
        bannerHeight: window.innerWidth / (25 / 9),
        msg: 'wages',
        hasData:false,
        wagesList: [],
        sum: '',
        menuType: 3,
      }
    },

    components: {
      'bottomMenu': bottomMenu
    },

    mounted() {
      this.init();
    },

    filters: {
      filterDate(date) {
        var date = new Date(date);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ';
        return Y + M + D;
      }
    },

    methods:{
      async init() {
        const result = await getSalarys();
        if (result.code == 0) {
          if(!result.data.list || result.data.list.length == 0) {
            this.hasData = false
          } else {
            this.hasData = true;
            this.wagesList = result.data.list;
            this.sum = result.data.sum;
          }
        }
      },

      goToFindJob(){
        this.$router.push({
          path:`/`
        })
      },

      gotoDetail(item) {
        this.$router.push({
          path: `/wagesDetail`, 
          query: item
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .returnFee{
    position: absolute;
    background: #f5f5f5;
    height: 100%;
    width: 100%;
  }

  .banner{
    background: url("/static/wechat/images/centerBg@2x.png");
    background-size: 100%;
  }
</style>
